<template>
  <a-card :bordered="false">
    <a-row :gutter="24">
      <a-col :xl="6" :lg="7" :md="8" :sm="24">
        <div class="table-operator">
          <a-button type="primary"  @click="autoAll()">全部自动</a-button>
          <a-button type="primary" @click="disAutoAll()">全部手动</a-button>
        </div>
      </a-col>
    </a-row>
    <br/>
    <a-list :grid="{ gutter: 9, column: 3 }" :data-source="data">
      <a-list-item slot="renderItem" slot-scope="item, index" >
        <a-card hoverable bordered
                :style="getBackColor(item.status)"
                :headStyle="hstyle"
                :body-style='{padding:0}'
                v-if="item.viewType == 2"
        >
          <div style="background-color: #D4F2E7;height: 60px;margin-top: -62px;position: relative;font-weight: bolder;font-size: 18px;">
            <span style="margin-left: 25px;background-color: #008080">【写入信息】</span>
            <span style="margin-left: 25px">目标站:{{item.target}}</span>
            <span style="margin-left: 25px" v-if="item.taskType == 0">任务类型:无任务</span>
            <span style="margin-left: 25px" v-else-if="item.taskType == 1">任务类型:入库</span>
            <span style="margin-left: 25px" v-else-if="item.taskType == 2">任务类型:出库</span>
            <span style="margin-left: 25px" v-else>任务类型:未知</span>
            <br/>
            <span style="margin-left: 25px">任务号:{{item.taskNo}}</span>
            <span style="margin-left: 25px">取货完成:{{item.getFinish==1?"完成":"未完成"}}</span>
            <span style="margin-left: 25px">放货完成:{{item.putFinish==1?"完成":"未完成"}}</span>
          </div>
          <div style="background-color: #D4F2E7;height: 60px;margin-top: -315px;position: relative;font-weight: bolder;font-size: 18px;">
            <span style="margin-left: 25px;background-color: #008080">【读取信息】</span>
            <span style="margin-left: 10px">任务号:{{item.deviceNum}}</span>
            <span style="margin-left: 10px">载位:{{item.inPlaceNum==1?"有载":"无载"}}</span>
            <span style="margin-left: 10px">是否有货:{{item.haveStock==1?"有货":"无货"}}</span>
            <br/>
            <span style="margin-left: 10px" v-if="item.status == 1">状态:停机未启动</span>
            <span style="margin-left: 10px" v-else-if="item.status == 2">状态:联机自动</span>
            <span style="margin-left: 10px" v-else-if="item.status == 3">状态:脱机自动</span>
            <span style="margin-left: 10px" v-else-if="item.status == 4">状态:手动</span>
            <span style="margin-left: 10px" v-else-if="item.status == 5">状态:故障</span>
            <span style="margin-left: 10px" v-else-if="item.status == 6">状态:维修</span>
            <span style="margin-left: 10px" v-else>状态:未知</span>
            <span style="margin-left: 10px">故障码:{{item.faultCode}}</span>
            <span style="margin-left: 10px">工作状态:{{item.workStatus==1?"运行":"停机"}}</span>
          </div>
          <img
            slot="cover"
            alt="输送线信息"
            src="~@assets/2.png"
            style="height: 220px;margin-top: 50px;margin-bottom: 50px"
          />

          <template slot="actions" class="ant-card-actions">
            <a-switch :checked="item.auto" checked-children="自动" un-checked-children="手动" @click="changeStatus(item.coord,0)"/>
            <a-badge :status="'success'" :text="item.coord+'('+item.device+')'"/>
            <a-badge v-if="item.workStatus == '0'" :status="'default'" :text="'电机停止运行'"/>
            <a-badge v-else-if="item.workStatus == '1'" status="processing" text="电机运行"/>
            <a-badge v-else :status="'default'" :text="'未知'"/>
          </template>
        </a-card>
        <a-card hoverable bordered
                :style="getBackColor(item.status)"
                :headStyle="hstyle"
                :body-style='{padding:0}'
                v-else
        >
          <div style="background-color: #D4F2E7;height: 60px;margin-top: -315px;position: relative;font-weight: bolder;font-size: 18px;">
            <span style="margin-left: 25px;background-color: #008080">【出入口读取信息】</span>
            <span style="margin-left: 10px">条码:{{item.bcrCode}}</span>
            <span style="margin-left: 10px">重量:{{item.weight}}</span>
            <br/>
            <span style="margin-left: 10px" v-if="item.detection == 0">外形检测:默认</span>
            <span style="margin-left: 10px" v-else-if="item.detection == 1">外形检测:正常</span>
            <span style="margin-left: 10px" v-else-if="item.detection == 2">外形检测:前超限</span>
            <span style="margin-left: 10px" v-else-if="item.detection == 3">外形检测:后超限</span>
            <span style="margin-left: 10px" v-else-if="item.detection == 4">外形检测:左超限</span>
            <span style="margin-left: 10px" v-else-if="item.detection == 5">外形检测:右超限</span>
            <span style="margin-left: 10px" v-else-if="item.detection == 6">外形检测:超高</span>
            <span style="margin-left: 10px" v-else>外形检测:未知</span>
            <span style="margin-left: 10px">流水号:{{item.plcNum}}</span>
          </div>
          <img
            slot="cover"
            alt="输送线信息"
            src="~@assets/2.png"
            style="height: 220px;margin-top: 50px;margin-bottom: 50px"
          />

          <template slot="actions" class="ant-card-actions">
            <a-switch :checked="item.auto" checked-children="自动" un-checked-children="手动" @click="changeStatus(item.coord,1)"/>
            <a-badge :status="'success'" :text="item.coord"/>
          </template>
        </a-card>
      </a-list-item>
    </a-list>
  </a-card>
</template>
<script>

import {JeecgListMixin} from "@/mixins/JeecgListMixin";
import { getAction, postAction} from '@/api/manage';

export default {
  name: "TranslineDetailInfo",
  mixins: [JeecgListMixin],
  components: {
  },
  data() {
    return {
      data : [],
      hstyle:{"font-size": "20px","color":"#4B0082","text-align":"center"},
      plcNo:'',
      url: {
        list: "/wcs/wcsCoordConfig/lineDetailInfo",
        autoUrl: "/wcs/wcsDeviceInfo/changeDeviceStatus",
        autoOneUrl: "/wcs/wcsDeviceInfo/changeDeviceStatus",
      },
    };
  },
  created(){
    //定时获取工位数据
    this.timerCoordInfo();
    this.initData(); //加载机床状态数据函数
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  },
  methods:{
    timerCoordInfo(){
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.initData(); //加载机床数据信息
      }, 2000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    getBackColor(status){
      if(status == '1'){
        return "background-color: #40E0D0"
      }else if(status == '2'){
        return "background-color: #C0C0C0"
      }else if(status == '3'){
        return "background-color: #00BFFF"
      }else if(status == '4'){
        return "background-color: #FFA500"
      }else if(status == '5'){
        return "background-color: #F08080"
      }else if(status == '6'){
        return "background-color: #FF6347"
      }else{
        return "background-color: #FFA500"
      }
    },
    initData(){
      this.loadData();
    },
    loadData(){
      this.plcNo = this.$route.query.plcNo
      getAction(this.url.list, {plcNo:this.plcNo}).then((res) => {
        if (res.success) {
          this.data = res.result;
        }
      })
    },
    changeStatus(coord,bePort){
      let params = new URLSearchParams();
      params.append('coord', coord);
      params.append('bePort', bePort);
      postAction(this.url.autoOneUrl,params).then((res)=>{
        if (res.success) {
          this.$message.success(res.message);
        }else{
          this.$message.error(res.message);
        }
        this.loadData();
      })
    },
    autoAll(){
      let params = new URLSearchParams();
      params.append('dealType', 1);
      params.append('plcNo', this.plcNo);
      postAction(this.url.autoUrl,params).then((res)=>{
        if (res.success) {
          this.$message.success("操作成功!");
        }else{
          this.$message.error(res.message);
        }
      })
      this.loadData();
    },
    disAutoAll(){
      let params = new URLSearchParams();
      params.append('dealType', 2);
      params.append('plcNo', this.plcNo);
      postAction(this.url.autoUrl,params).then((res)=>{
        if (res.success) {
          this.$message.success("操作成功!");
        }else{
          this.$message.error(res.message);
        }
      })
      this.loadData();
    },
  }
};
</script>
<style>
.ant-card-extra, .ant-card-head-title{
  font-size: 20px;
  font-weight: bolder;
}
</style>